<%@ page language="java" contentType="text/html; charset=utf-8" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<script type="text/javascript" src="${basePath}/resource/js/common/messages_${sessionScope.lang}.js"></script>
<div class="wrapper-popup hid" id="wrapper-scope" title="选择分享范围">
    <header class="sub-header">
        <a class="fl" href="javascript:history.back();"><spring:message code="cancel"/></a>
        <span><spring:message code="shareTo"/></span>
        <a class="fr" name="complete" href="javascript:"><spring:message code="done"/></a>
    </header>
    <div class="list-pos-pop margin-topbar padding-container">
        <section class="layout-box line-around auth-list" id="public">
            <div class="select selected"><i class="iconfont select">&#xe603;</i><i class="iconfont selected">
                &#xe602;</i></div>
            <div class="box-col item-list">
                <div class="title"><spring:message code="public"/></div>
                <div class="remark"><spring:message code="publicForAll"/></div>
            </div>
        </section>
        <section class="layout-box line-around auth-list" id="private">
            <div class="select"><i class="iconfont select">&#xe603;</i><i class="iconfont selected">&#xe602;</i></div>
            <div class="box-col item-list">
                <div class="title"><spring:message code="private"/></div>
                <div class="remark"><spring:message code="privateForMe"/></div>
            </div>
        </section>
        <section class="layout-box line-around auth-list" id="enable">
            <div class="select"><i class="iconfont select">&#xe603;</i><i class="iconfont selected">&#xe602;</i></div>
            <div class="box-col item-list">
                <div class="title"><spring:message code="shareList"/></div>
                <div class="remark"><spring:message code="selCanSee"/></div>
            </div>
            <div class="more"><i class="iconfont close">&#xe610;</i><i class="iconfont open hid">&#xe616;</i></div>
        </section>
        <div class="auth-list hid" id="enable-part">
            <section class="layout-box line-around user-list add">
                <div class="plus"><i class="iconfont">&#xe615;</i></div>
                <div class="box-col item-list">
                    <div class="title"><spring:message code="selFriends"/></div>
                </div>
            </section>
        </div>
        <section class="layout-box line-around auth-list" id="disable">
            <div class="select"><i class="iconfont select">&#xe603;</i><i class="iconfont selected">&#xe602;</i></div>
            <div class="box-col item-list">
                <div class="title"><spring:message code="shareNoList"/></div>
                <div class="remark"><spring:message code="selNoCanSee"/></div>
            </div>
            <div class="more"><i class="iconfont close">&#xe610;</i><i class="iconfont open hid">&#xe616;</i></div>
        </section>
        <div class="auth-list hid" id="disable-part">
            <section class="layout-box line-around user-list add">
                <div class="plus"><i class="iconfont">&#xe615;</i></div>
                <div class="box-col item-list">
                    <div class="title"><spring:message code="selFriends"/></div>
                </div>
            </section>
        </div>
        <div class="placeholder"></div>
    </div>
</div>
<script id="scope-tpl" type="text/html">
    {{# for(var i = 0, len = d.length; i < len; i++){ var group = d[i];}}
    <section class="layout-box line-around user-list" id="{{group.groupId}}">
        <div class="select"><i class="iconfont select">&#xe603;</i><i class="iconfont selected">&#xe602;</i></div>
        <div class="box-col item-list">
            <div class="title"><span>{{group.groupName}}</span>(<span>{{group.userCount}}</span>人)</div>
        </div>
        <div class="more"><i class="iconfont">&#xe605;</i></div>
    </section>
    {{# } }}
</script>
<script>

    var userGroup =
    <%=request.getAttribute("userGroup")%> || FriendGroup.getFriendGroups();
    FriendGroup.storageFriendGroups(userGroup);

    laytpl(document.getElementById('scope-tpl').innerHTML).render(userGroup.enable, function (html) {
        $('#enable-part').append(html);
    });
    laytpl(document.getElementById('scope-tpl').innerHTML).render(userGroup.disable, function (html) {
        $('#disable-part').append(html);
    });
</script>
<jsp:include page="group.jsp"/>
